<script setup lang="ts">
import type { CustomDialogInstance } from '@/types'
import type { FormRules, FormInstance } from 'element-plus'
import { addGateway, updateGateway } from '@/api/modules/gateway'
import { REG_EXP_IP, type GatewayInfo } from '../../composable'

defineOptions({ name: 'OperateModal' })

const emits = defineEmits<{
  (e: 'saveSuccess'): void
}>()
const info = defineModel<GatewayInfo>({ required: true })
const dialogRef = ref<CustomDialogInstance>()
const formRef = ref<FormInstance>()
const rules: FormRules = reactive({
  gatewayNumber: [{ required: true, message: '请输入网关编号' }],
  gatewayName: [{ required: true, message: '请输入网关名称' }],
  gatewayModel: [{ required: true, message: '请输入规格型号' }],
  gatewayManufacturer: [{ required: true, message: '请输入生产厂家' }],
  gatewayLocation: [{ required: true, message: '请输入安装位置' }],
  gatewayStatus: [{ required: true, message: '请选择运行状态' }],
  gatewayIp: [
    { required: true, message: '请输入IP地址' },
    { pattern: REG_EXP_IP, message: '请输入正确的IP地址' },
  ],
})
async function clickSave(done: () => void) {
  const isValid = await formRef.value?.validate().catch(() => {
    done()
  })
  if (isValid) {
    const {
      id,
      gatewayNumber,
      gatewayName,
      gatewayModel,
      gatewayManufacturer,
      gatewayLocation,
      gatewayInstallManufacturer,
      gatewayIp,
      gatewayStatus,
      // gatewayStatusName,
      gatewayStatusTime,
      gatewayInstallTime,
      gatewayInstallWay,
    } = info.value
    // 字段映射关系
    // {
    // id: v.id,
    // gatewayNumber: v.number,
    // gatewayName: v.name,
    // gatewayModel: v.model,
    // gatewayManufacturer: v.manufacturer,
    // gatewayLocation: v.installLocation,
    // gatewayInstallManufacturer: v.installManufacturer,
    // gatewayIp: v.ipAddress,
    // gatewayStatus: v.status,
    // gatewayStatusName: v.statusName,
    // gatewayStatusTime: v.statusDate,
    // gatewayInstallTime: v.installDate,
    // gatewayInstallWay: v.installWay,
    // }
    const params = {
      id,
      number: gatewayNumber,
      name: gatewayName,
      model: gatewayModel,
      manufacturer: gatewayManufacturer,
      installLocation: gatewayLocation,
      installManufacturer: gatewayInstallManufacturer,
      ipAddress: gatewayIp,
      status: gatewayStatus,
      // statusName: gatewayStatusName,
      statusDate: gatewayStatusTime,
      installDate: gatewayInstallTime,
      installWay: gatewayInstallWay,
    }
    try {
      if (params.id) {
        await updateGateway(params)
      }
      else {
        await addGateway(params)
      }
      ElMessage.success('保存成功')
      done()
      close()
      emits('saveSuccess')
    }
    catch (e) {
      done()
    }
  }
}

function open() {
  dialogRef.value?.open()
}
function close() {
  dialogRef.value?.close()
}

function disabledDate(time: Date) {
  return time.getTime() > Date.now()
}

defineExpose({
  open,
  close,
})
</script>

<template>
  <CustomDialog
    ref="dialogRef"
    title="网关信息"
    need-saving
    @confirm="clickSave"
  >
    <ElForm ref="formRef" class="flex flex-wrap px-6" :model="info" :rules="rules" label-width="80px">
      <ElFormItem class="w-48%" label="网关编号" prop="gatewayNumber">
        <ElInput v-model="info.gatewayNumber" placeholder="请输入网关编号" :maxlength="20" clearable />
      </ElFormItem>
      <ElFormItem class="w-1/2" label="网关名称" prop="gatewayName" label-width="100px">
        <ElInput v-model="info.gatewayName" placeholder="请输入网关名称" :maxlength="20" clearable />
      </ElFormItem>
      <ElFormItem class="w-48%" label="规格型号" prop="gatewayModel">
        <ElInput v-model="info.gatewayModel" placeholder="请输入规格型号" :maxlength="20" clearable />
      </ElFormItem>
      <ElFormItem class="w-1/2" label="生产厂家" prop="gatewayManufacturer" label-width="100px">
        <ElInput v-model="info.gatewayManufacturer" placeholder="请输入生产厂家" :maxlength="20" clearable />
      </ElFormItem>
      <ElFormItem class="w-48%" label="安装位置" prop="gatewayLocation">
        <ElInput v-model="info.gatewayLocation" placeholder="请输入安装位置" :maxlength="20" clearable />
      </ElFormItem>
      <ElFormItem class="w-1/2" label="安装厂家" label-width="100px">
        <ElInput v-model="info.gatewayInstallManufacturer" :maxlength="30" clearable />
      </ElFormItem>
      <ElFormItem class="w-48%" label="安装时间">
        <ElDatePicker v-model="info.gatewayInstallTime" type="date" value-format="YYYY-MM-DD" format="YYYY-MM-DD" clearable :disabled-date="disabledDate" />
      </ElFormItem>
      <ElFormItem class="w-1/2" label="安装方式" label-width="100px">
        <ElInput v-model="info.gatewayInstallWay" placeholder="" :maxlength="20" clearable />
      </ElFormItem>
      <ElFormItem class="w-48%" label="运行状态" prop="gatewayStatus">
        <DictionaryPicker v-model="info.gatewayStatus" code="WANG_GUAN_ZHUANG_TAI" class="w-full" />
      </ElFormItem>
      <ElFormItem class="w-1/2" label="状态发生时间" label-width="100px">
        <ElDatePicker v-model="info.gatewayStatusTime" type="date" value-format="YYYY-MM-DD" format="YYYY-MM-DD" clearable :disabled-date="disabledDate" />
      </ElFormItem>
      <ElFormItem class="w-48%" label="IP地址" prop="gatewayIp">
        <ElInput v-model="info.gatewayIp" placeholder="请输入IP地址，格式：127.0.0.1" clearable />
      </ElFormItem>
    </ElForm>
    <div class="h-30px" />
  </CustomDialog>
</template>
